<template>
  <div style="width:calc(100% - 220px)">
    <!-- 领航条 -->
    <div class="header">
        <div :class="{active:activeMenu===1?true:false}" @click="chooseMenu(1)">管理员</div>
        <div :class="{active:activeMenu===3?true:false}" @click="chooseMenu(3)">教师</div>
        <div :class="{active:activeMenu===2?true:false}" @click="chooseMenu(2)">学生</div>
    </div>
    <div style="width:100%">
        <UserListVue :dataList="userList" v-if="activeMenu===2?true:false" @refresh="getUserList()"></UserListVue>
        <AdminListVue :dataList="adminList" v-if="activeMenu===1?true:false" @refresh="getAdminList"></AdminListVue>
        <AdminListVue :dataList="teacherList" v-if="activeMenu===3?true:false" @refresh="getAdminList"></AdminListVue>
    </div>
  </div>
</template>

<script>
import request from '@/util/request';
import UserListVue from '../../components/server/UserList.vue';
import AdminListVue from '../../components/server/AdminList.vue';
export default {
    data(){
        return{
            activeMenu:1,
            userList:[],
            adminList:[],
            teacherList:[]
        }
    },
    components:{UserListVue,AdminListVue},
    methods:{
        chooseMenu(menu){
            this.activeMenu = menu
        },
        getAdminList(){
            this.teacherList = []
            this.adminList = []
            request.get('/admin/list').then(res=>{
                res.data.forEach(item=>{
                    
                    console.log(item)
                    if (item.grade === 0 || item.grade === 2) {  
                        this.teacherList.push(item) 
                    } else if (item.grade === 1) {  
                        this.adminList.push(item) 
                    } 
                })
                console.log('---',this.adminList,this.teacherList)
            }).catch(err=>{
                if (err.response) {
                    this.$notify.error(err.message)
                } else {
                    this.$notify.error('网络错误')
                }
            })
        },
        getUserList(){
            request.get('/admin/user/list').then(res=>{
               this.userList = res.data
               console.log('获取的数据',res.data)
            }).catch(err=>{
                if (err.response) {
                    this.$notify.error(err.message)
                } else {
                    this.$notify.error('网络错误')
                }
            })
        }
    },
    mounted(){
        this.getUserList()
        this.getAdminList()
    }
}
</script>

<style lang="scss" scoped>
.header{
    display: flex;
    width: 100%;
    margin-left: 20px;
    div{
        width: 60px;
        text-align: center;
        margin-right: 20px;
        font-size: 18px;
        padding: 10px;
        &:hover{
            cursor: pointer;
            color: #ff4d00;
        }
    }
    .active{
        color: #ff4d00;
        border-bottom: #ff4d00 2px solid;
    }
}
</style>